<template>
    <div class="sidebar-wrapper">
        <el-scrollbar wrap-class="scrollbar-wrap" view-class="scrollbar-view">
            <el-menu
                    menu-trigger="click"
                    :default-active="activeTab"
                    :collapse="collapse"
                    :unique-opened="false"
                    @select="handleMenu">
                <el-menu-item index="Home" @click="$router.push({ name: 'Home' })">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <sidebar-item v-for="route in menus" :key="route.path" :item="route"/>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import sidebarItem from './sidebarItem'

    export default {
        name: 'sidebar',
        components: {sidebarItem},
        data() {
            return {}
        },
        props: {
            collapse: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            ...mapState('main', ['activeTab', 'menus']),
            routes() {
                return this.$router.options.routes;
            }
        },
        methods: {
            ...mapMutations('main', ['addTabs']),
            handleMenu(key) {
                if (key != this.activeTab) {
                    this.$router.push({name: key});
                }
            }
        },
        watch: {
            '$route'(to, from) {
                this.addTabs({title: to.meta.title, name: to.name});
            }
        }
    }
</script>

<style scoped lang="less">
</style>
